{block name=head_slider}
<script type="text/javascript">
	{literal}
		$(document).ready(function(){
			$("#featured").tabs({fx:{opacity: "toggle"}}).tabs("rotate", 5000, true); 
		});
	{/literal}
</script>
{/block}

<div id="featured" >
	<ul class="ui-tabs-nav">
		{foreach $content->slider['title'] as $slider}
			<li class="ui-tabs-nav-item" id="nav-fragment-{$slider@index}">
				<a href="#fragment-{$slider@index}">
					<img class="ui-tabs-nav-item-perso" src="files{$content->slider['image'][$slider@index]}" alt="{$content->slider['title'][$slider@index]}" />
					<span>{$content->slider['title'][$slider@index]}</span>
				</a>
			</li>
		{/foreach}
	</ul>
		
	{foreach $content->slider['title'] as $slider}
		<div id="fragment-{$slider@index}" class="ui-tabs-panel" style="">
			<img src="files{$content->slider['image'][$slider@index]}" alt="{$content->slider['title'][$slider@index]}" />
			<div class="info" >
				<h2><a href="{$content->slider['link'][$slider@index]}" >{$content->slider['title'][$slider@index]}</a></h2>
				<p>{$content->slider['text'][$slider@index]} <a href="{$content->slider['link'][$slider@index]}">en savoir plus</a></p>
			</div>
		</div>
	{/foreach}
</div>
